<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/head.jsp"%>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面</span>
            </div>
            <div class="search">
			<%-- <form method="post" action="${pageContext.request.contextPath }/users?method=userList">--%>
				<form method="post" action="${pageContext.request.contextPath }/userList">
					<input name="method" value="query" class="input-text" type="hidden">
					 <span>用户名：</span>
					 <input name="queryName" class="input-text"	type="text" value="${queryUserName }">

					 <span>用户角色：</span>
					 <select name="queryUserRole">
						   <option value="0">--请选择--</option>
						   <c:forEach items="${roleList}" var="role">
							   <c:if test="${queryUserRole == role.id}" var="flag">
								   <option value="${role.id}" selected>${role.roleName}</option>
							   </c:if>
							   <c:if test="${!flag}">
								   <option value="${role.id}">${role.roleName}</option>
							   </c:if>
						   </c:forEach>
	        			</select>

					 <input type="hidden" name="pageNo" value="1"/>
					 <input	value="查 询" type="submit" id="searchbutton">
					 <a href="${pageContext.request.contextPath}/toUserAdd" >添加用户</a>
				</form>
            </div>
            <!--用户-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="10%">用户编码</th>
                    <th width="20%">用户名称</th>
                    <th width="10%">性别</th>
                    <th width="10%">年龄</th>
                    <th width="10%">电话</th>
                    <th width="10%">用户角色</th>
                    <th width="30%">操作</th>
                </tr>
				<!-- 不带分页 -->
				<%-- <c:forEach items="${userList}" var="user"> --%>
				<!-- 带分页 -->
				<c:forEach items="${pageSupport.data}" var="user">
					<tr>
						<td>
							<span>${user.userCode}</span>
						</td>
						<td>
							<span>${user.userName}</span>
						</td>
						<td>
							<span>${user.gender == 1 ? "女" : "男"}</span>
						</td>
						<td>
							<span>${user.userAge}</span>
						</td>
						<td>
							<span>${user.phone}</span>
						</td>
						<td>
							<span>${user.userRoleName}</span>
						</td>
						<td>
							<span><a class="viewUser" href="/userInfo?id=${user.id}"><img src="${pageContext.request.contextPath }/images/read.png" alt="查看" title="查看"/></a></span>
							<span><a class="modifyUser" href="toUserMod?id=${user.id}"><img src="${pageContext.request.contextPath }/images/xiugai.png" alt="修改" title="修改"/></a></span>
							<span><a class="deleteUser" href="javascript:void(0);" delUserId="${user.id}"><img src="${pageContext.request.contextPath }/images/schu.png" alt="删除" title="删除"/></a></span>
						</td>
					</tr>
				</c:forEach>

			</table>
		  	<c:import url="rollpage.jsp"></c:import>
        </div>
    </section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/jsp/common/foot.jsp" %>

<script type="text/javascript">
	// 删除弹窗简单用法
	var delUserId;
	function openYesOrNoDLG(){
		$('.zhezhao').css('display', 'block');
		$('#removeUse').fadeIn();
	}

	function cancleBtn(){
		$('.zhezhao').css('display', 'none');
		$('#removeUse').fadeOut();
	}
	function changeDLGContent(contentStr){
		var p = $(".removeMain").find("p");
		p.html(contentStr);
	}

	// 点击删除
	$(".deleteUser").click(function (){
		delUserId = $(this).attr("delUserId");
		changeDLGContent("确定要删除此用户吗？");
		openYesOrNoDLG();
	});

	$('#no').click(function () {
		cancleBtn();
	});

	$('#yes').click(function () {
		// 推荐用ajax实现异步删除
		location.href = "/userDel?id=" + delUserId;
	});
</script>